<template>
  <div class="userMyHome">
    <div class="myHome_status" v-if="data.educatId">
      <p class="myhomeName">姓名：{{ data.name }}</p>
      <p class="myhomeClass">班级：{{ data.class }}</p>
    </div>
    <!-- 教师个人信息 -->
    <div class="myHome_status" v-if="data.nickname">
      <p class="myhomeName">{{ data.name }}</p>
      <div class="myhomeSuperviseClass">
        负责班级：
        <span v-for="(item, index) in data.ManageClass" :key="index"
          >{{ item.name }}、</span
        >
      </div>
    </div>
    <div class="myhomefooter">
      <div class="back">
        <p>作品分享次数</p>
        <p class="num">{{ sharedNum }}</p>
      </div>
      <div class="back">
        <p>点赞数</p>
        <p class="num">{{ likesNum }}</p>
      </div>
      <div class="back">
        <p>评论数</p>
        <p class="num">{{ commentsNum }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
defineProps(["data", "sharedNum", "likesNum", "commentsNum"]);
</script>
<style scoped lang="scss">
.userMyHome {
  padding: 20px;
  background-color: white;
  .myHome_status {
    .myhomeName,
    .myhomeClass {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .myhomeSuperviseClass {
      margin-top: 50px;
      font-size: 20px;
    }
  }
  .myhomefooter {
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    .back {
      min-width: 15%;
      margin-right: 10px;
      text-align: center;
      border-right: 1px solid #ebebeb;
      p {
        font-size: 14px;
        color: #a4a4a4;
      }
      .num {
        margin-top: 10px;
        font-size: 20px;
        color: #000000;
      }
    }
    .back:last-of-type {
      border-right: none;
    }
  }
}
</style>
